import { useState } from 'react';

const messages = [
  'Learn React ⚛️',
  'Apply for jobs 💼',
  'Invest your new income 🤑',
];

function App() {
  const [step, setstep] = useState(1);
  const [isOpen, setIsOpen] = useState(true);

  function handlePrevious() {
    if (step > 1) setstep(step - 1);
  }

  function handleNext() {
    if (step < 3) {
      setstep((s) => s + 1);
      // setstep((s) => s + 1);
    }
  }

  return (
    <>
      <button className='close' onClick={() => setIsOpen((is) => !is)}>
        &times;
      </button>

      {isOpen && (
        <div class='steps'>
          <div class='numbers'>
            <div class={`step-${step}, ${step >= 1 ? 'active' : ''}`}>1</div>
            <div class={`step-${step}, ${step >= 2 ? 'active' : ''}`}>2</div>
            <div class={`step-${step}, ${step >= 3 ? 'active' : ''}`}>3</div>
          </div>

          <p class='message'>
            Step {step}: {messages[step - 1]}
          </p>

          <div class='buttons'>
            <button onClick={handlePrevious} class='previous'>
              Previous
            </button>
            <button onClick={handleNext} class='next'>
              Next
            </button>
          </div>
        </div>
      )}
    </>
  );
}

export default App;
